<template>
    <div class="user-profile">
        <div class="avatar-wrapper" @click="uploadAvatar">
            <img :src="avatarUrl" alt="avatar" class="avatar">
            <div class="edit-overlay">
                <i class="icon iconfont icon-edit"></i>
            </div>
            <div class="avatar-tip">点击上传头像</div>
        </div>
        <div class="user-info">
            <div class="info-item">
                <div class="info-label">昵称</div>
                <div class="info-value">
                    <span>{{ nickname }}</span>
                    <i class="icon iconfont icon-edit" @click="editNickname"></i>
                </div>
            </div>
            <hr>
            <div class="info-item">
                <div class="info-label">邮箱</div>
                <div class="info-value">
                    <span>{{ email }}</span>
                    <i class="icon iconfont icon-edit" @click="editEmail"></i>
                </div>
            </div>
            <hr>
            <div class="info-item">
                <div class="info-label">电话</div>
                <div class="info-value">
                    <span>{{ phone }}</span>
                    <i class="icon iconfont icon-edit" @click="editPhone"></i>
                </div>
            </div>
            <hr>
            <div class="info-item">
                <div class="info-label">密码</div>
                <div class="info-value">
                    <span>********</span>
                    <i class="icon iconfont icon-edit" @click="editPassword"></i>
                </div>
            </div>
            <hr>
            <div class="action-buttons">
                <button class="btn save-btn" @click="saveChanges">保存</button>
                <button class="btn cancel-btn" @click="cancelChanges">取消</button>
            </div>
        </div>
    </div>
</template>
    
<script>
export default {
    data() {
        return {
            avatarUrl: 'https://via.placeholder.com/150',
            nickname: 'binjie09',
            email: 'binjie09@example.com',
            phone: '13812345678'
        }
    },
    methods: {
        uploadAvatar() {
            // TODO: 实现上传头像逻辑
        },
        editNickname() {
            // TODO: 实现编辑昵称逻辑
        },
        editEmail() {
            // TODO: 实现编辑邮箱逻辑
        },
        editPhone() {
            // TODO: 实现编辑电话逻辑
        },
        editPassword() {
            // TODO: 实现编辑密码逻辑
        },
        saveChanges() {
            // TODO: 实现保存修改逻辑
        },
        cancelChanges() {
            // TODO: 实现取消修改逻辑
        }
    }
}
</script>
    
<style lang="scss">
.user-profile {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;

    .avatar-wrapper {
        position: relative;
        width: 150px;
        height: 150px;
        cursor: pointer;

        .avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .edit-overlay {
            position: absolute;
            bottom: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            background-color: #000;
            opacity: 0.8;
            border-radius: 50%;

            .iconfont {
                font-size: 20px;
                color: #fff;
            }

            &:hover {
                opacity: 1;
            }
        }

        .avatar-tip {
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: #666;
        }
    }

    .user-info {
        flex: 1;

        .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            .info-label {
                width: 80px;
                font-weight: bold;
            }

            .info-value {
                flex: 1;
                display: flex;
                align-items: center;

                span {
                    margin-right: 10px;
                }

                .icon-edit {
                    font-size: 16px;
                    color: #999;
                    cursor: pointer;
                }

                .icon-edit:hover {
                    color: #333;
                }
            }
        }
    }

    hr {
        margin: 10px 0;
        border: none;

        border-top: 1px solid #ccc;
    }

    .action-buttons {
        display: flex;
        justify-content: flex-end;

        .btn {
            margin-left: 10px;
            padding: 5px 10px;
            font-size: 14px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease-in-out;

            &.save-btn {
                background-color: #00bcd4;
                color: #fff;

                &:hover {
                    background-color: #0097a7;
                }
            }

            &.cancel-btn {
                background-color: #fafafa;
                color: #333;

                &:hover {
                    background-color: #f0f0f0;
                }
            }
        }
    }
}
</style>